@extends('seller::layout.master')

@section('title', __('seller::edit.edit_title'))

@section('page-bottom-btns')
  <button type="button" class="btn w-min-100 btn-lg btn-primary submit-form" form="form-seller-edit">{{ __('common.save') }}</button>
  <button class="btn btn-lg btn-default w-min-100 ms-3" onclick="bk.back()">{{ __('common.return') }}</button>
@endsection

@section('content')
  <div id="shipping-app" class="card">
    <div class="card-body">
      <form class="needs-validation" novalidate action="{{ seller_route('edit.update') }}" method="POST" id="form-seller-edit">
        @csrf
        @method('POST')

        <ul class="nav nav-tabs nav-bordered mb-3" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-basic" type="button" >{{ __('admin/product.basic_information') }}</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-service" type="button">{{ __('seller::edit.text_service') }}</button>
          </li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane fade show active" id="tab-basic">
            <x-seller-form-input name="email"  :title="__('seller::edit.email')" :error="$errors->first('email')" :value="old('email', $seller->email ?? '')" required />
            <x-seller-form-input name="telephone"  :title="__('seller::edit.telephone')" :value="old('telephone', $seller->telephone ?? '')" />
            <x-seller-form-input name="store_name"  :title="__('seller::edit.store_name')" :error="$errors->first('store_name')" :value="old('store_name', $seller->store_name ?? '')" required />
            <x-seller-form-input name="company"  :title="__('seller::edit.company')" :value="old('company', $seller->company ?? '')" />
            <x-seller-form-textarea name="description"  :title="__('seller::edit.description')" :value="old('description', $seller->description ?? '')" />

            <x-admin::form.row title="{{ __('admin/setting.default_address') }}">
              <div class="d-lg-flex">
                <div>
                  <select class="form-select wp-200 me-3" name="country_id" aria-label="Default select example">
                    <option value="0">{{ __('common.please_choose') }}</option>
                    @foreach ($countries as $country)
                      <option
                        value="{{ $country->id }}"
                        {{ $country->id == ($seller->country_id ?? system_setting('base.country_id', '1')) ? 'selected': '' }}>
                        {{ $country->name }}
                      </option>
                    @endforeach
                  </select>
                  <div class="help-text font-size-12 lh-base">{{ __('admin/setting.default_country_set') }}</div>
                </div>
                <div>
                  <select class="form-select wp-200 zones-select" name="zone_id" aria-label="Default select example"></select>
                  <div class="help-text font-size-12 lh-base">{{ __('admin/setting.default_zone_set') }}</div>
                </div>
              </div>
            </x-admin::form.row>

            <x-seller-form-image name="logo" title="logo" :value="old('logo', $seller->logo ?? '')">
              <div class="help-text font-size-12 lh-base">{{ __('common.recommend_size') }} 380*100</div>
            </x-seller-form-image>

            <x-seller-form-image name="banner" title="banner" :value="old('banner', $seller->banner ?? '')">
              <div class="help-text font-size-12 lh-base">{{ __('common.recommend_size') }} 1600*500</div>
            </x-seller-form-image>

            <x-admin::form.row title="{{ __('seller::register.seller_type') }}">
              <select class="form-select mb-3 w-max-400" name="type" required disabled>
                <option value="company">{{ __('seller::register.type_company') }}</option>
                <option value="personal">{{ __('seller::register.type_personal') }}</option>
              </select>
            </x-admin::form.row>

            <div class="row g-3 mb-3">
              <label class="wp-200 col-form-label text-end">
                <div class="id-card-title-company">{{ __('seller::register.business_license') }}</div>
                <div class="id-card-title-personal d-none">{{ __('seller::register.id_card_photo') }}</div>
              </label>
              <div class="col-auto wp-200-">
                <div class="w-max-400">
                  <div class="position-relative d-inline-block">
                    <div
                      class="bg-light border wh-80 d-flex justify-content-center align-items-center position-relative"
                      ratio="32/32">
                      <img src="{{ image_resize(old('id_card', $seller->id_card ?? '')) }}" class="img-fluid id-card-img max-h-100">
                    </div>
                    <a href="{{ image_origin($seller->id_card) }}" style="right: -24px; top:0" class="position-absolute border lh-1 bg-white p-1 text-dark" target="_blank" v-if="form.id_card"><i class="bi bi-search"></i></a>
                  </div>
                </div>
              </div>
            </div>

            <div class="row g-3 mb-3">
              <label class="wp-200 col-form-label text-end">
                <span class="id-number-title-tax">{{ __('seller::register.tax_id') }}</span>
                <span class="id-number-title-number d-none">{{ __('seller::register.id_number') }}</span>
              </label>
              <div class="col-auto wp-200-">
                <div class="w-max-400">
                  <input type="text" name="id_number" class="form-control" value="{{ old('id_number', $seller->id_number ?? '') }}" placeholder="{{ __('seller::register.tax_id') }}" required disabled>
                  @if ($errors->has('tax_id'))
                  <div class="invalid-feedback">{{ $errors->first('tax_id') }}</div>
                  @else
                  <div class="invalid-feedback">
                    <span class="invalid-feedback-tax">{{ __('common.error_required', ['name' => __('seller::register.tax_id')]) }}</span>
                    <span class="invalid-feedback-id-number d-none">{{ __('common.error_required', ['name' => __('seller::register.id_number')]) }}</span>
                  </div>
                  @endif
                </div>
              </div>
            </div>

            <x-seller::form.row :title="__('seller::edit.text_bank')">
              <select class="form-select wp-400" name="bank">
                <option value="">{{ __('common.please_choose') }}</option>
                @foreach (plugin_setting('multi_seller.withdraw_banks') ?: [] as $bank)
                  <option value="{{ $bank }}" {{ $bank == old('bank', $seller->bank ?? '') ? 'selected' : '' }}>{{ $bank }}</option>
                @endforeach
              </select>
            </x-seller::form.row>

            <x-seller-form-input name="bank_account"  :title="__('seller::edit.bank_account')" :value="old('bank_account', $seller->bank_account ?? '')" />
            <x-seller-form-input name="bank_name"  :title="__('seller::edit.bank_name')" :value="old('bank_name', $seller->bank_name ?? '')" />
          </div>

          <div class="tab-pane fade show" id="tab-service">
            <x-seller-form-image name="settings[customer_service_qrcode]" :title="__('seller::edit.customer_service_qrcode')" :value="old('customer_service_qrcode', $seller->settings['customer_service_qrcode'] ?? '')">
              <div class="d-flex align-items-center lh-1">
                <div class="delete-img text-danger cursor-pointer">{{ __('common.delete') }}</div>
                <span class="mx-1 opacity-25">|</span>
                <div class="help-text font-size-12 lh-base mt-0">{{ __('common.recommend_size') }} 400*400</div>
              </div>
            </x-seller-form-image>
            <x-seller-form-image name="settings[customer_service_icon]" :title="__('seller::edit.customer_service_icon')" :value="old('customer_service_icon', $seller->settings['customer_service_icon'] ?? '')">
              <div class="d-flex align-items-center lh-1">
                <div class="delete-img text-danger cursor-pointer">{{ __('common.delete') }}</div>
                <span class="mx-1 opacity-25">|</span>
                <div class="help-text font-size-12 lh-base mt-0">{{ __('common.recommend_size') }} 70*70</div>
              </div>
            </x-seller-form-image>
            <x-seller-form-input name="settings[customer_service_link]"  :title="__('seller::edit.customer_service_link')" :value="old('customer_service_link', $seller->settings['customer_service_link'] ?? '')" />
          </div>
        </div>

        <x-seller::form.row>
          <button type="submit" class="d-none">{{ __('common.save') }}</button>
        </x-seller::form.row>
      </form>
    </div>
  </div>
@endsection

@push('footer')
  <script>
    @if (session('success'))
      layer.msg('{{ session('success') }}')
    @endif

    const country_id = {{ $seller->country_id ?? system_setting('base.country_id', '1') }};
    const zone_id = {{ $seller->zone_id ?? system_setting('base.zone_id', '1') ?: 1 }};

    // 获取省份
    const getZones = (country_id) => {
      const url = "{{ shop_route('home.index') }}";
      $http.get(`${url}/countries/${country_id}/zones`, null, {hload: true, base: "/" }).then((res) => {
        if (res.data.zones.length > 0) {
          $('select[name="zone_id"]').html('');
          res.data.zones.forEach((zone) => {
            $('select[name="zone_id"]').append(`
              <option ${zone_id == zone.id ? 'selected' : ''} value="${zone.id}">${zone.name}</option>
            `);
          });
        } else {
          $('select[name="zone_id"]').html(`
            <option value="">请选择</option>
          `);
        }
      })
    }

    $('.delete-img').click(function () {
      $(this).parent().siblings('input[type="hidden"]').val('');
      $(this).parent().siblings('.open-file-manager').html('<i class="bi bi-plus fs-1 text-muted"></i>');
    });

    $(function() {
      if (country_id) {
        getZones(country_id);
      }

      $('select[name="country_id"]').on('change', function () {
        getZones($(this).val());
      });

      const sellerType = @json(old('company', $seller->type ?? 'company'));
      $('select[name="type"]').val(sellerType).trigger('change');
    });

    $('select[name="type"]').on('change', function () {
      var type = $(this).val();
      var text = '';
      if (type == 'company') {
        $('.id-card-title-company').removeClass('d-none');
        $('.id-card-title-personal').addClass('d-none');
        $('.id-number-title-tax').removeClass('d-none');
        $('.id-number-title-number').addClass('d-none');
        // name="id_number" 的 placeholder
        $('input[name="id_number"]').attr('placeholder', $('.id-number-title-tax').text());

        $('.invalid-feedback-business-license').removeClass('d-none');
        $('.invalid-feedback-id-card').addClass('d-none');
        $('.invalid-feedback-tax').removeClass('d-none');
        $('.invalid-feedback-id-number').addClass('d-none');
      } else {
        $('.id-card-title-company').addClass('d-none');
        $('.id-card-title-personal').removeClass('d-none');
        $('.id-number-title-tax').addClass('d-none');
        $('.id-number-title-number').removeClass('d-none');
        // name="id_number" 的 placeholder
        $('input[name="id_number"]').attr('placeholder', $('.id-number-title-number').text());

        $('.invalid-feedback-business-license').addClass('d-none');
        $('.invalid-feedback-id-card').removeClass('d-none');
        $('.invalid-feedback-tax').addClass('d-none');
        $('.invalid-feedback-id-number').removeClass('d-none');
      }
    });
  </script>
@endpush
